<script setup lang='ts'>
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useOrderStore } from '@/stores/order'
import { useCounterStore } from '@/stores/users'
import moment from 'moment';
import { Dialog, Toast } from 'vant';
//使用路由
const route = useRoute();
const router = useRouter();
//使用订单的仓库
const orderStore = useOrderStore();
//使用用户的仓库
const userStore = useCounterStore();

// 使用watch监听路由跳转
watch(route, (value) => {
  //  获取路由的time
  const time = value.query.time
  if (time) {
    //  发请求根据time查看信息
    orderStore.confirmOrderListHandler({ userid: userStore.userid, time })
  } else {
    // 个人中心跳入
    orderStore.orderlistHandler(userStore.userid)
  }
},
  // 页面加载立即执行一次
  {
    immediate: true
  }
)
// 获取仓库的数据用于渲染
const orderInfoList = computed(() => {
  // 判断仓库是否有数据
  if (orderStore.orderList) {
    //定义一个变量,list是一个对象,用于处理数据
    let list = {}
    orderStore.orderList.forEach(item => {
      const key = item['time']
      if (list[key]) {
        (list[key] as any).push(item)
      } else {
        (list[key] as any) = [item]
      }
    })
    return list
  }
})

// 默认地址
//使用计算属性从localStorage里面使用计算属性计算出默认的地址
const defaultAddress = computed(() => {
  //获取localStorage里面的地址
  return JSON.parse(localStorage.getItem("addressList") as any).find((item: any) => item.isDefault)
})

// 计算总价
const totalPrice = computed(() => {
  if (JSON.stringify(orderInfoList.value) != '{}') {
    let totalPrice = 0;
    (Object as any).values(orderInfoList.value).forEach((item: any) => {
      item.forEach((item1: any) => {
        totalPrice += item1.num * item1.originprice
      })
    })
    return totalPrice * 100;
  }
})
// 支付函数
const onSubmit =  () => {
  try {
    Dialog.confirm({
      title: '请确认支付',
    })
      .then(() => {
         orderStore.deleteCartItemHandler(userStore.userid)
        Toast.success('支付成功');
        router.push("/order")
      })
      .catch(() => {
        // on cancel
      });
    //跳转到订单页面,就可以看到所有的订单信息了
  } catch (error) {
    Toast.fail('支付失败');
  }
}
</script>
<template>
  <div class="order">
    <!-- 头部 -->
    <van-nav-bar title="订单页" left-text="返回" left-arrow @click-left="$router.back()" />
    <!-- 地址 -->
    <div class="address" v-if="$route.query.time" @click="$router.push('/address')">
      <div class="left">
        <p class="add-top" v-if="defaultAddress">
          <span class="name">{{ defaultAddress.name }}</span>
          <span class="phone">{{ defaultAddress.tel }}</span>
        </p>
        <p class="adds">
          {{ defaultAddress.province }}{{ defaultAddress.city }}{{ defaultAddress.county }}{{
              defaultAddress.addressDetail
          }}
        </p>
      </div>
      <div class="right">
        <van-icon name="edit" size="26px" />
      </div>
    </div>
    <!-- TODO 订单信息 -->
    <div class="orderList" v-for="orderList, index in  (Object as any).values(orderInfoList)" :key="index">
      <div class="orderItem">
        <span>{{ moment(+(Object as any).keys(orderInfoList)[index]).format("YYYY-MM-DD HH:mm:ss") }}</span>
        <van-card v-for="order in orderList" :key="order.orderid" :num="order.num" :price="order.originprice"
          :title="order.proname" class="goods-card" :thumb="order.img1" />
      </div>
    </div>
    <!-- TODO 支付操作 -->
    <div v-if="$route.query.time">
      <van-submit-bar :price="totalPrice" button-text="支付" @submit="onSubmit" />
    </div>
  </div>
</template>
<style scoped lang='scss'>
.address {
  margin: 20px;
  border-radius: 10px;
  border: 1px solid #000;
  display: flex;
  justify-content: space-around;

  .add-top {
    font-size: 18px;
    font-weight: 700;

    .name {
      margin-right: 30px;
    }
  }

  .right {
    margin-top: 70px;
  }

}

.van-card {
  margin: 20px;
  border-radius: 10px;
  border: 1px solid #000;
}

.orderItem {
  margin-top: 10px;

  span {
    display: block;
    margin-left: 20px;
    font-weight: 700;
  }
}
</style>